<template>
	<!-- 分页组件容器 -->
	<view class="zdy-pagination__wrap">
		<!-- 上一页按钮 -->
		<view class="zdy-pagination__btn"
			:class="{'zdy-pagination__disabled':currentIndex === 1,'zdy-pagination__btn-ac':currentIndex !== 1 && highlight,'zdy-pagination__color':!color}"
			:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
			@click="clickPrev">
			<!-- 默认上一页文字或自定义插槽内容 -->
			<text :class="{'zdy-pagination__color':!color}" :style="{color:color,fontSize:size+'rpx'}"
				v-if="!custom">{{prevText}}</text>
			<slot name="prev"></slot>
		</view>

		<!-- 页码显示（简约模式） -->
		<view class="zdy-pagination__num" v-if="isPage && pageType==1">
			<!-- 当前页码 -->
			<text :class="{'zdy-pagination__active-color':!currentColor}"
				:style="{color:getCurrentColor,fontSize:pageFontSize+'rpx'}">{{currentIndex}}</text>
			<!-- 总页数 -->
			<text :class="{'zdy-pagination__color':!pageColor}"
				:style="{color:pageColor,fontSize:pageFontSize+'rpx'}">/{{maxPage || 0}}</text>
		</view>

		<!-- 页码显示（展开模式） -->
		<view class="zdy-page__number" v-if="isPage && pageType==2">
			<!-- 页码项 -->
			<view class="zdy-page__num-item"
				:class="{'zdy-pagination__bg':!activeBgColor && currentIndex===item,'zdy-page__num-width':item==='...' || (item!='...' && item<1000),'zdy-page__num-padding':item!='...' && item>999}"
				v-for="(item,index) in pageNumber" :key="index"
				:style="{background:currentIndex===item?getActiveBgColor:pageBgColor,borderRadius:radius+'rpx'}"
				@tap.stop="handleClick(item,index)">
				<!-- 页码文字 -->
				<text class="zdy-page__num-text" :class="{'zdy-pagination__color':!color && currentIndex!==item}"
					:style="{color:currentIndex===item?activeColor:pageColor}">{{item}}</text>
			</view>
		</view>

		<!-- 下一页按钮 -->
		<view class="zdy-pagination__btn"
			:class="{'zdy-pagination__disabled':currentIndex === maxPage,'zdy-pagination__btn-ac':currentIndex !== maxPage && highlight,'zdy-pagination__color':!color}"
			:style="{width:width+'rpx',height:height+'rpx',borderColor:borderColor,background:background,borderRadius:radius+'rpx'}"
			@click="clickNext">
			<!-- 默认下一页文字或自定义插槽内容 -->
			<text :class="{'zdy-pagination__color':!color }" :style="{color:color,fontSize:size+'rpx'}"
				v-if="!custom">{{nextText}}</text>
			<slot name="next"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zdy-pagination",
		emits: ['change'],
		props: {
			// 上一页按钮文字
			prevText: {
				type: String,
				default: '上一页'
			},
			// 下一页按钮文字
			nextText: {
				type: String,
				default: '下一页'
			},
			// 按钮宽度
			width: {
				type: [Number, String],
				default: 100
			},
			// 按钮高度
			height: {
				type: [Number, String],
				default: 60
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: 'transparent'
			},
			// 背景颜色
			background: {
				type: String,
				default: '#fff'
			},
			// 文字颜色
			color: {
				type: String,
				default: '#333'
			},
			// 文字大小
			size: {
				type: [Number, String],
				default: 24
			},
			// 圆角半径
			radius: {
				type: [Number, String],
				default: 12
			},
			// 是否有点击效果
			highlight: {
				type: Boolean,
				default: true
			},
			// 是否自定义按钮内容
			custom: {
				type: Boolean,
				default: false
			},
			// 当前页码
			current: {
				type: [Number, String],
				default: 1
			},
			// 当前页码文字颜色
			currentColor: {
				type: String,
				default: ''
			},
			// 页码文字颜色
			// #ifdef APP-NVUE
			pageColor: {
				type: String,
				default: '#333',
			},
			// #endif
			// #ifndef APP-NVUE
			pageColor: {
				type: String,
				default: ''
			},
			// #endif
			// 页码文字大小
			pageFontSize: {
				type: [Number, String],
				default: 32
			},
			// 是否显示页码
			isPage: {
				type: Boolean,
				default: true
			},
			// 页码显示类型：1-简约型 2-展开型
			pageType: {
				type: [Number, String],
				default: 1
			},
			// 页码背景色
			pageBgColor: {
				type: String,
				default: 'rgba(0,0,0,0)'
			},
			// 当前页码背景色
			activeBgColor: {
				type: String,
				default: ''
			},
			// 当前页码文字颜色
			activeColor: {
				type: String,
				default: '#fff'
			},
			// 数据总量
			total: {
				type: [Number, String],
				default: 0
			},
			// 每页数据量
			pageSize: {
				type: [Number, String],
				default: 10
			}
		},
		computed: {
			/**
			 * 计算最大页数
			 * 根据数据总量和每页数量计算
			 * @returns {number} 最大页数
			 */
			maxPage() {
				let maxPage = 1
				let total = Number(this.total)
				let pageSize = Number(this.pageSize)
				if (total && pageSize) {
					maxPage = Math.ceil(total / pageSize)
				}
				return maxPage
			},

			/**
			 * 获取当前页码颜色
			 * @returns {string} 当前页码颜色值
			 */
			getCurrentColor() {
				let color = this.currentColor;
				return color;
			},

			/**
			 * 获取当前页码背景色
			 * @returns {string} 当前页码背景色值
			 */
			getActiveBgColor() {
				let color = this.activeBgColor;
				return color;
			}
		},
		watch: {
			/**
			 * 监听当前页码变化
			 * @param {number} val - 新的当前页码
			 */
			current(val) {
				this.currentIndex = +val
				if (this.pageType == 2) {
					this.getPageNumber()
				}
			},

			/**
			 * 监听数据总量变化
			 * @param {number} val - 新的数据总量
			 */
			total(val) {
				if (this.pageType == 2) {
					this.getPageNumber()
				}
			},

			/**
			 * 监听每页数据量变化
			 * @param {number} val - 新的每页数据量
			 */
			pageSize(val) {
				if (this.pageType == 2) {
					this.getPageNumber()
				}
			}
		},
		created() {
			// 初始化当前页码
			this.currentIndex = +this.current
			// 如果是展开型分页，初始化页码数组
			if (this.pageType == 2) {
				this.getPageNumber()
			}
		},
		data() {
			return {
				currentIndex: 1, // 当前页码
				pageNumber: [], // 页码数组（展开型使用）
				pagerCount: 0 // 显示页码数量
			};
		},
		methods: {
			/**
			 * 生成从start到end的数字数组
			 * @param {number} start - 起始数字
			 * @param {number} end - 结束数字
			 * @returns {Array} 生成的数字数组
			 */
			toArray(start, end) {
				return Array.from(new Array(end + 1).keys()).slice(start);
			},

			/**
			 * 获取页码数组（用于展开型分页）
			 * 根据当前页码、数据总量和每页数量计算显示的页码数组
			 * 包含处理省略号逻辑
			 */
			getPageNumber() {
				const num = this.currentIndex
				const total = this.total
				const pageSize = this.pageSize
				// 最大显示页码数（移动端宽度有限，暂时固定）
				let pagerCount = this.pagerCount
				if (!pagerCount) {
					pagerCount = 6
					const width = Number(this.width)
					if (!isNaN(width) && width <= 60) {
						pagerCount = 8;
					}
					let ifPad = ''
					if (uni.getStorageSync('ifPad')) {
						ifPad = true;
						pagerCount = 6;
					}
					let ifHorizontal = getApp().globalData.ifHorizontal
					if (!ifHorizontal) {
						pagerCount = 6
					}
					this.pagerCount = pagerCount;
				}
				let showPagerArr = this.toArray(1, pagerCount)
				let pagerNum = Math.ceil(total / pageSize)
				// 处理不同情况下的页码显示
				if (pagerNum <= 1) {
					showPagerArr = [1]
				} else if (pagerNum <= pagerCount) {
					showPagerArr = this.toArray(1, pagerNum)
				} else {
					showPagerArr[pagerCount - 1] = pagerNum;
					if (num < pagerCount - 1) {
						showPagerArr[pagerCount - 2] = '...'
					} else if (num >= pagerNum - (pagerCount - 3)) {
						showPagerArr[1] = '...';
						showPagerArr.forEach((item, index) => {
							if (index > 1) {
								showPagerArr[index] = pagerNum - (pagerCount - 3) + (index - 2)
							}
						})
					} else {
						showPagerArr[1] = '...';
						for (let i = 0; i < pagerCount - 3; i++) {
							showPagerArr[i + 2] = num + i
						}
						showPagerArr[pagerCount - 2] = '...'
					}
				}
				this.pageNumber = showPagerArr
			},

			/**
			 * 点击上一页按钮事件处理
			 * 当前为第一页时不执行操作
			 */
			clickPrev() {
				if (Number(this.currentIndex) === 1) return;
				this.currentIndex -= 1
				this.change('prev')
			},

			/**
			 * 点击下一页按钮事件处理
			 * 当前为最后一页时不执行操作
			 */
			clickNext() {
				if (Number(this.currentIndex) === this.maxPage) return;
				this.currentIndex += 1
				this.change('next')
			},

			/**
			 * 处理页码点击事件
			 * @param {string|number} item - 点击的页码内容（可能是数字或省略号）
			 * @param {number} index - 点击项在页码数组中的索引
			 */
			handleClick(item, index) {
				let pageNo = Number(item)
				const idx = this.pagerCount === 6 ? 4 : 6;
				// 处理省略号点击
				if (isNaN(pageNo)) {
					if (index === 1) {
						pageNo = this.pageNumber[index + 1] - (this.pagerCount - 4)
					} else if (index === idx) {
						pageNo = this.pageNumber[index - 1] + 1
					}
				} else {
					if (Number(this.currentIndex) === pageNo) return;
				}
				this.currentIndex = pageNo;
				this.change('pageNumber')
			},

			/**
			 * 页码变化事件处理
			 * @param {string} type - 变化类型（'prev'/'next'/'pageNumber'）
			 */
			change(type) {
				this.getPageNumber()
				this.$emit('change', this.currentIndex)
			}
		}
	}
</script>

<style scoped>
	/* 分页容器样式 */
	.zdy-pagination__wrap {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		position: relative;
		overflow: hidden;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	/* 分页按钮基础样式 */
	.zdy-pagination__btn {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		position: relative;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		/* #ifdef APP-NVUE */
		border-width: 0.5px;
		/* #endif */

		/* #ifndef APP-NVUE */
		border-width: 1px;
		flex-shrink: 0;
		/* #endif */
		border-style: solid;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	/* 按钮点击效果 */
	.zdy-pagination__btn-ac:active {
		opacity: 0.5;
	}

	/* 页码容器样式 */
	.zdy-pagination__num {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	/* 非NVUE环境下的样式 */
	/* #ifndef APP-NVUE */
	.zdy-pagination__active-color {
		color: var(--zdy-color-primary, #465CFF) !important;
	}

	.zdy-pagination__bg {
		background: var(--zdy-color-primary, #465CFF) !important;
	}

	.zdy-pagination__color {
		color: var(--zdy-color-section, #333) !important;
	}

	/* #endif */

	/* 禁用状态样式 */
	.zdy-pagination__disabled {
		opacity: 0.3;
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
	}

	/* 展开型页码容器 */
	.zdy-page__number {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* 页码项样式 */
	.zdy-page__num-item {
		/* #ifndef APP-NVUE */
		min-width: 60rpx;
		display: flex;
		transform: translateZ(0);
		/* #endif */
		height: 60rpx;
		align-items: center;
		justify-content: center;
		margin: 0 4rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	/* NVUE环境下的特殊样式 */
	/* #ifdef APP-NVUE */
	.zdy-page__num-width {
		width: 60rpx;
	}

	.zdy-page__num-padding {
		padding: 0 8rpx;
	}

	/* #endif */

	/* 页码项点击效果 */
	.zdy-page__num-item:active {
		opacity: .5;
	}

	/* 页码文字样式 */
	.zdy-page__num-text {
		font-size: 24rpx;
	}
</style>